<template>
	
	<div class="personal-container">
		<h2>个人中心</h2>
		
		<!-- 上传头像 -->
		<!-- action是请求提交的地址 -->
		<el-upload class="avatar-uploader" action="/api/user/upload" :headers="headers" :show-file-list="false"
			:on-success="handleAvatarSuccess" :data="{'id':user.id}" :before-upload="beforeAvatarUpload"
			style="display: inline-block;width: 300px">
		
			<img v-if="imageUrl" :src="imageUrl" class="avatar">
			<i v-else class="el-icon-plus avatar-uploader-icon">
				<!-- 显示头像 -->
				<el-row class="demo-avatar demo-basic">
					<el-col :span="12">
						<div class="demo-basic--circle">
							<div class="block">
								<!-- 头像路径 -->
								<el-avatar shape="square" :size="200" :src="user.profilePhoto"></el-avatar>
							</div>
						</div>
					</el-col>
				</el-row>
			</i>
		</el-upload>
		
		<p @click="updateNickname()">{{user.nickname}}</p>
		<p>当前积分:{{user.integralNumber}}</p>
		<el-button type="primary" @click="showIntegralRecord()" round>查看积分记录</el-button>
		<p>个人介绍</p>
		<div style="margin: 20px 0"></div>
		<el-input @blur="selfIntroductionBlur()" class="textarea" type="textarea" cols="20" v-model="user.selfIntroduction"
			:autosize="{ minRows: 3, maxRows: 6}" placeholder="输入您的个人介绍">
		</el-input>
		
		<p>个人邀请码:<span @click="copy()" v-text="user.invitationCode" ref="copytext"></span>(点击可复制)</p>
		<!-- 个人邀请码:{{user.invitationCode}} (点击可复制) -->
	</div>
</template>

<script>
	// 文件上传,上传头像

	import qs from 'qs'
	import storage from '@/utils/localstorage.js'

	import {
		ElMessageBox,
		ElMessage
	} from 'element-plus'

	export default {
		name: "PersonalCenter",
		data() {
			return {
				user: {
					// id: '0',
					// //头像
					// headPortrait: '@/assets/avatar.jpg',
					// //积分
					// score: '0',
					// //个人介绍
					// selfIntroduction: '',
				},
				nickname: '',
				headers: {
					uid: storage.get("uid"),
					token: storage.get("token")
				},

				// url:'https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg',
				// url: 'img_2022_01_08191505370.jpg'
			}
		},
		mounted() { //挂载后执行的方法
			this.getUserInfo();
			// this.getAllUsers();
		},
		methods: {
			getUserInfo() {
				// //获取路由传来的参数
				// this.user.id = localstorage.get('uid');;
				// console.log("this.user.id=" + this.user.id);
				this.$axios.get('/api/user/getInfo', {
						params: {
							// id: this.user.id
						}
					})
					.then(data => {
						//将响应结果数据赋值给 user对象
						this.user = data.user;
						console.log("this.user.profilePhoto=" + this.user.profilePhoto);
						// this.id = data.user.id;
						// console.log("this.id="+this.id);
					}).catch(error => {
						console.log("error:" + error)
					})
			},
			//查看积分记录
			showIntegralRecord() {
				this.$router.push({
					path: '/integralRecord',
					params: {
						id: this.id
					}
				})
			},
			//处理头像成功
			handleAvatarSuccess(res, file) {
				console.log("res,file" + res + "," + file);
				console.log("更新用户信息")
				//刷新当前页面
				location.reload();
				// this.getUserInfo();
				// this.imageUrl = URL.createObjectURL(file.raw);
				// console.log(URL.createObjectURL(file.raw))
				// console.log(this.imageUrl)
				// console.log(res)
			},
			//上传头像之前
			beforeAvatarUpload(file) {
				console.log("file=" + file);
				// const isJPG = file.type === 'image/jpeg';
				// const isLt2M = file.size / 1024 / 1024 < 2;

				// if (!isJPG) {
				// 	this.$message.error('上传头像图片只能是 JPG 格式!');
				// }
				// if (!isLt2M) {
				// 	this.$message.error('上传头像图片大小不能超过 2MB!');
				// }
				// return isJPG && isLt2M;
				// https://blog.csdn.net/m0_49647974/article/details/109557562
			},
			copy() {
				this.copyContent = this.$refs.copytext.innerText; //也可以直接写上等于你想要复制的内容
				var input = document.createElement("input"); // 直接构建input
				input.value = this.copyContent; // 设置内容
				console.log(input.value);
				document.body.appendChild(input); // 添加临时实例
				input.select(); // 选择实例内容
				document.execCommand("Copy"); // 执行复制
				document.body.removeChild(input); // 删除临时实例
				this.$message({
					message: "复制成功",
					type: 'success'
				})
			},
			updateNickname() {
				ElMessageBox.prompt('请输入你的昵称', '设置昵称', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
				}).then(({
					value
				}) => {
					console.log("value=" + value);
					this.user.nickname = value;
					let user = qs.stringify(this.user)
					console.log(user)
					console.log("user.nickname=" + user.nickname);
					this.$axios.post('/api/user/updateNickname', user)
						.then(res => {
							console.log("res=" + res);
						})
						.catch(() => {
							ElMessage({
								type: 'info',
								message: '输入取消',
							})
						})
					ElMessage({
						type: 'success',
						message: `您的昵称已修改为${value}`,
					})

				})
			},
			//个人介绍失去焦点事件
			selfIntroductionBlur() {
				let user = qs.stringify(this.user);
				this.$axios.post('/api/user/updateNickname', user)
					.then(res => {
						console.log("res=" + res);
						this.$message({
							type:'success',
							message:'修改成功'
						})
					})
					.catch(() => {
						ElMessage({
							type: 'info',
							message: '修改失败',
						})
					})
			}


		}
	}
</script>


<style scoped>
	.personal-container {
		position: relative;
		top: 0px;
		margin: 0px auto;
		width: 400px;
		height: 220px;
		/* border: gray solid 1px; */
		/* border-radius: 5px; */
	}
	.textarea {
		width: 300px;
	}
</style>
